<template>
  <div>
    <!-- //滑动导航 -->
    <van-tabs v-model="active" @click="getPhotoListByCateId">
      <van-tab v-for="item in cates" :key="item.id" :title="item.title" >
      </van-tab>

      <!-- 图片懒加载 -->
    </van-tabs>
    <router-link v-for="item in imageList" :key="item.id" :to="`/Photos/Photoinfo/${item.id}`" tag="div">
    <img v-lazy="item.img_url">
    </router-link>
  </div>
</template>

<script>
export default {
  data: () => ({
    
    active: 0,
    cates: [],
    imageList: []
  }),
  created() {
    this.getAllCategory();
    this.getPhotoListByCateId(0);
  },
  methods: {
    async getAllCategory() {
      //获取所有 的图片分类
      const {
        body: { status, message }
      } = await this.$http.get("api/getimgcategory");
      if (status === 0) {
        message.unshift({ title: "全部", id: 0 });
        this.cates = message;
      }
    },

    async getPhotoListByCateId(cateId) {
      //获取所有 的图片分类
      //  const{body:{ status,message }} = await this.$http.get("api/getimgages/" + cateId);
      const {
        body: { status, message }
      } = await this.$http.get("api/getimages/"+cateId);
      if (status === 0) {
        this.imageList = message;
        console.log(this.imageList);
      }
    }
  }
};
</script>

<style  scoped>
img{
  width: 100%;
  height: 380px;
}
</style>
